<template>
  <div class="GdwyyAppItemCard" :class="['GdwyyAppItemCard--' + color]">
    <GdwyyAppSmallTitle :title="title" :showArrow="showArrow" @goDetail="$emit('goDetail')"></GdwyyAppSmallTitle>

    <div :class="`content grid-${col || 3}`">
      <template v-for="(item, index) in list">
        <div class="item fill-h flex-column flex-between" v-if="isBq ? index != 0 : true" :key="index + 'p'">
          <div class="font-13 color333">
            <img
              v-if="item.icon"
              class="icon"
              :src="require('../../../../../../assets/imgs/reconsitution/' + item.icon + '.png')"
            />
            {{ item.label }}
          </div>
          <template v-if="title == '智家线'">
            <div class="font-20 num" :class="{ 'num-mgl': item.icon }" v-if="index >= 3">
              {{ (onlyData ? data[item.model] : data[dataModel[item.model]]) || 0 }}
            </div>
            <div class="font-20 num" :class="{ 'num-mgl': item.icon }" v-else>
              {{ (onlyData ? jfData[item.model] : jfData[dataModel[item.model]]) || 0 }}
            </div>
          </template>
          <template v-else>
            <div class="font-20 num" :class="{ 'num-mgl': item.icon }" >
              {{ (onlyData ? data[item.model] : data[dataModel[item.model]]) || 0 }}
            </div>
          </template>
        </div>
        <div v-if="isBq && index == 2" :key="item.bq_id"></div>
      </template>
    </div>
  </div>
</template>

<script>
import { GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { sql2apiAction } from '@/api/manage'

export default {
  name: 'GdwyyAppItemCard',
  components: { GdwyyAppSmallTitle },
  props: {
    title: {
      type: String,
      default: '装机',
    },
    color: {
      type: String,
      default: 'green',
    },
    showArrow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dataModel: {
      type: Object,
      default: () => {
        return {}
      },
    },
    col: {
      type: Number,
      default: 3,
    },
    isBq: Boolean,
    queryParam: {
      type: Object,
      default: () => {}
    },
    pageType: {
      type: String,
      default: 'morning'
    },
  },
  watch: {
    queryParam: {
      deep: true,
      handler: function() {
        this.loadJfData();
      }
    }
  },
  data() {
    return {
      jfData: {},
      url: {
        chJf: "2c3a07178ba92724018bb9eab5bc0006",
        xhJf: "2c3a07178ba92724018bc78b84db000c",
      }
    }
  },

  computed: {
    onlyData() {
      return !Object.keys(this.dataModel).length
    },
  },

  mounted() {
    if ( this.title == '智家线' ) this.loadJfData();
  },

  methods: {
    loadJfData() {
      const params = {
        ...this.queryParam,
        bqId: this.data.bq_id
      };
      let url = "";
      if ( this.pageType == 'morning' ) url = this.url.chJf;
      if ( this.pageType == 'evening' ) url = this.url.xhJf;
      sql2apiAction( url, params )
      .then( res => {
        const data = res.result;
        this.jfData = data[0] || {};
      } )
    }
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppItemCard {
  .content {
    padding: 2.6667vw 4vw;
    box-sizing: border-box;
    display: grid;
    .num {
      margin-top: 4vw;
    }
    &.grid-3 {
      grid-template-columns: 1.5fr  1fr  1fr;
      div:nth-child(3n){
        justify-self: end;
        min-width: 18.6667vw;
      }
    }
    &.grid-4 {
      grid-template-columns: repeat(4, 16vw);
      justify-content: space-between;
      .item{
        justify-self: center;
      }
    }
  }
  .icon {
    width: 3.7333vw;
    height: 3.7333vw;
  }
  .num-mgl {
    margin-left: 4.8vw;
  }
  &--green {
    ::v-deep {
      .small-title::before {
        background: @main-green-color;
      }
    }
    .num {
      color: @main-green-color;
    }
    .content {
      .bg('jfzj_card_bg.png');
      width: 90.4vw;
    }
  }
  &--org {
    ::v-deep {
      .small-title::before {
        background: @main-org-color;
      }
    }
    .num {
      color: @main-org-color;
    }
    .content {
      .bg('zyx_bg.png');
      width: 90.4vw;
    }
  }
  &--red {
    ::v-deep {
      .small-title::before {
        background: @main-red-color;
      }
    }
    .num {
      color: @main-red-color;
    }
    .content {
      .bg('bq_bg.png');
      width: 90.4vw;
    }
  }
}
</style>